<template>
  <div>
    <div>
      <van-nav-bar
        title="意见反馈"
        left-text="返回"
        right-text="新增"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <div class="oldfeeds" v-for="item in data.allfeeds" :key="item.id">
        <div>
          <div class="toptitle">
            <p class="p1">某用户</p>
            <span class="span1">{{item.id}}天前</span>
          </div>
          <div class="middletitle">
            <span>标题:</span>
            <p class="p2">{{item.feedbackTitle}}</p>
          </div>
          <div class="footertext">
            <span>内容:</span>
            <p class="p3">{{item.feedbackDetails}}</p>
          </div>
        </div>
        <van-rate v-model="value" readonly />
      </div>
    </div>
  </div>
</template>

<script setup>
import { flagStore } from "../stores/counter";
import { onMounted, reactive, ref } from "vue";
import { feeds } from "../model/userModel";
import { useRouter } from "vue-router";
let flagInfo = flagStore();
let router = useRouter();
let value = ref(3);
let data = reactive({
  allfeeds: []
});
let onClickLeft = () => {
  router.push("/userdetail");
};
let onClickRight = () => {
  router.push("/addfeedback");
};
onMounted(() => {
  flagInfo.changeFlag(false);
  feeds(
    {},
    {
      Authorization: window.localStorage.getItem("token")
    }
  ).then(res => {
    data.allfeeds = res.data.rows.reverse();
    console.log(res);
    console.log(data.allfeeds);
  });
});
</script>

<style lang="scss">
.oldfeeds {
  width: 100%;
  height: 100px;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  .toptitle {
    display: flex;
    justify-items: self-start;
    margin-top: 10px;
    .p1 {
      margin-left: 15px;
      font-size: 16px;
    }
    .span1 {
      margin-left: 10px;

      font-size: 12px;
      color: #aaa;
    }
  }
  .middletitle {
    margin-top: 5px;
    margin-left: 15px;
    display: flex;
    justify-items: start;

    color: #aaaaaa;
    span {
      font-size: 14px;
    }
    p {
      font-size: 14px;
    }
  }
  .footertext {
    display: flex;
    justify-items: start;
    margin-top: 5px;
    margin-left: 15px;
    font-size: 12px;
    span {
      font-size: 14px;
    }
    p {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
    }
  }
  .van-rate {
    margin-top: 80px;
  }
}
</style>